<template>
  <div class="share_t">
    <div class="share_t_body">
      <div class="share_t_body_1 fx-row fx-row-center fx-row-middle">
        <div class="">
          <div class="share_t_body_1_card" :class="{'card_bg_1': id ==1,
                'card_bg_2': id ==2,'card_bg_3': id ==3,
                'card_bg_4': id == 4,'card_bg_5': id ==5}"></div>
          <div class="share_t_body_1_text fs-14 f-b-c">剩余{{surplusCardCountObj.count}}张</div>
        </div>
      </div>
      <div class="share_t_body_2 fx-row fx-row-center fx-row-middle  fs-16 f-b-c">
          你的好友邀请你送他一个卡片【{{surplusCardCountObj.name}}】
      </div>
    </div>
    <div class="share_t_footer fx-row fx-row-center fx-row-space-between">
      <div class="share_t_footer_d">
        <button @click="handleCloseShare" class="share_t_btn btn-big-ty2">无视他</button>
      </div>
      <div class="share_t_footer_d">
        <button @click="debounceHandeSendCard" class="share_t_btn btn-big-ty1">送给他</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { debounce } from '../../../utils/helps';

export default {
  props: ['id', 'surplusCardCountObj'],
  data() {
    return {
      debounceHandeSendCard: () => {},
    };
  },
  computed: {
    ...mapGetters(['urlData', 'cardTyObj']),
  },
  methods: {
    ...mapActions(['surplusCardCount', 'sendCard', 'getUserInfo']),
    async init() {
      const res = await this.surplusCardCount({
        openId: this.urlData.openid,
        cardId: this.id,
      });
      if (res.code === '0') {
        this.surplusCardCountObj = res.data;
      }
    },
    handleCloseShare() {
      this.$emit('handleCloseShare');
    },
    async handeSendCard() {
      const qdid = window.parseInt(this.id);
      const shareUserId = window.parseInt(this.urlData.shareUserId);
      const res = await this.sendCard({
        openId: this.urlData.openid,
        accessToken: this.urlData.access_token,
        userId: shareUserId,
        cardId: qdid,
        identification: this.urlData.identification,
      });
      if (res.code === '0') {
        this.$toasted.show('赠送成功', {
          position: 'top-center',
          duration: '1500',
          containerClass: 'c-toast',
        });
        this.handleCloseShare();
      } else {
        this.$toasted.show(res.message, {
          position: 'top-center',
          duration: '1500',
          fullWidth: true,
          containerClass: 'c-toast',
        });
      }
    },
  },
  async created() {
    if (this.id !== -1) {
      // this.init();
    }
    this.debounceHandeSendCard = debounce(this.handeSendCard, 300);
  },
};
</script>
<style lang="less">
.share_t{
  position: fixed;
  left: calc((~"100% - 2.95rem")/2);
  z-index: 4;
  top: 0.38rem;
  width: 2.95rem;
  .share_t_body{
    .share_t_body_1{
      height: 2.98rem;
      background: #faf4e7;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      .share_t_body_1_card{
        height: 1.6rem;
        width: 1.27rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .share_t_body_1_text{
        text-align: center;
        margin-top: 0.16rem;
      }
      .card_bg_1{
        background-image: url('../../../assets/image/card_1.png')
      }
      .card_bg_2{
        background-image: url('../../../assets/image/card_2.png')
      }
      .card_bg_3{
        background-image: url('../../../assets/image/card_3.png')
      }
      .card_bg_4{
        background-image: url('../../../assets/image/card_4.png')
      }
      .card_bg_5{
        background-image: url('../../../assets/image/card_5.png')
      }
    }
    .share_t_body_2{
      text-align: center;
      height: 0.8rem;
      background: #FDF3DE;
       border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }
  .share_t_footer{
    margin-top: 0.26rem;
    .share_t_footer_d{
      height: 0.45rem;
      width: 1.4rem;
      .share_t_btn{
        border-radius: 0.225rem;
        text-align: center;
        width: 100%;
        height: 0.45rem;
        border: 0;
      }
    }
  }
}
</style>
